<!doctype html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html style="height:100%">
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body style="height:100%">
  <canvas id="canvas" width="200" height="100"></canvas>
</body>
<script>
  var canvas = document.querySelector('canvas');
  canvas.style.width ='100%';
  canvas.style.height='100%';
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  var ctx = canvas.getContext("2d");
  var rColor = 0;

  function animate() {
    rColor += 1;
    rColor %= 255;
    ctx.fillStyle = 'rgb(' + rColor + ',0,0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    window.requestAnimationFrame(animate);
  }
  window.onload = animate;
</script>
</html>
